iT邦幫忙

2024 iThome 鐵人賽
DAY 10
0
Mobile Development

深入Android Java程式語言 - 打造我的行動應用系列 第 10 篇

[Day 10] 小練習

16th鐵人賽
131 瀏覽

  • 分享至 

  • xImage
    •  

到了第10天了，來做個小練習
這裡我是先做了一個有一些簡單小功能的小程式
這個程式有幾個要求

外觀

  1. 表面由上到下分別會各有兩個TextView、ImageView、EditText和一個按鈕
  2. 兩個TextView在按鈕按下前分別會顯示帳號顯示位子和密碼顯示位子
  3. 兩個ImageView分別各在兩個EditText前面
  4. 下面有一個按鈕上面的字體是確認

功能

  1. EditText那邊分成account和password
    account那欄輸入時會正常顯示，password那一欄會是以隱藏的方式顯示
  2. 按鈕按下後會將account和password那兩欄的資料往上丟，接著分別顯示在帳號顯示位子和密碼顯示位子的那兩個TextView那裡
  3. 若是長按按鈕的話則是會進入禁用按鈕的狀態

最終的樣子

  • 初始樣子
    https://ithelp.ithome.com.tw/upload/images/20240918/20168456PAfDIdCZDZ.png
  • ·EditText輸入後還沒按下按鈕的樣子
    (帳號是test、密碼是123456)
    https://ithelp.ithome.com.tw/upload/images/20240918/20168456Qf8WmQgVqz.png
  • 按下按鈕後會將EditText的資料給到上面的TextView顯示
    https://ithelp.ithome.com.tw/upload/images/20240918/20168456NhVOHqnshP.png
  • 長按按鈕後會進入禁用狀態
    https://ithelp.ithome.com.tw/upload/images/20240918/20168456sOW3PKhCba.png

接著來說一下程式碼
xml的部分就直接說做了什麼變動不一個一個放進來了
(最下面有放上完整的程式碼)

xml的方面分別做了以下變動

  1. 兩個TextView
    gravity改成center
    text改成帳號or密碼顯示位子
    textSize改成30dp

  2. 兩個ImageView
    background改成黑色(方便分辨)
    scaleType改成center

  3. Button
    text改成送出
    textSize改成20dp

  4. EditText
    text改成hint內容也改成account

接著再到MainActivity裡設定變數名稱

    private Button sendBtn;
    private TextView accountTv,passwordTv;
    private EditText accountEt,passwordEt;

將各個變數與對應的元件id綁定

        sendBtn = findViewById(R.id.main_send_btn);
        accountTv = findViewById(R.id.main_account_tv);
        passwordTv = findViewById(R.id.main_password_tv);
        accountEt = findViewById(R.id.main_account_et);
        passwordEt = findViewById(R.id.main_password_et);

設定點擊事件
這邊是讓它在被點擊後
會宣告兩個String分別代表account和password裡的內容
並將兩個EditText裡輸入的內容轉換成字串丟給兩個String
最後依照String裡內容來將兩個String分別丟入個別的TextView並顯示

        sendBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String accountStr = accountEt.getText().toString();
                String passwordStr = passwordEt.getText().toString();

                accountTv.setText("帳號："+accountStr);
                passwordTv.setText("密碼："+passwordStr);
            }
        });

設定長按事件
當使用者長時間壓著這個Button的時候，它會禁用掉這個按鈕

        sendBtn.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                sendBtn.setEnabled(false);
                return true;
            }
        });

下面是完整的程式碼

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/main_account_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="帳號顯示位子"
        android:textSize="30dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline16"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintHorizontal_bias="0.533"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.12" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.88807786" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.13" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.34" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/black"
        android:scaleType="center"
        app:layout_constraintBottom_toTopOf="@+id/guideline7"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline11"
        app:srcCompat="@android:drawable/ic_dialog_email" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/black"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline12"
        app:srcCompat="@android:drawable/ic_lock_idle_lock" />

    <Button
        android:id="@+id/main_send_btn"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="送出"
        android:textSize="20dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintEnd_toStartOf="@+id/guideline15"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/guideline10"
        app:layout_constraintTop_toTopOf="@+id/guideline9"
        app:layout_constraintVertical_bias="0.0" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.63" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.88" />

    <EditText
        android:id="@+id/main_account_et"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:ems="10"
        android:hint="account"
        android:inputType="text"
        app:layout_constraintBottom_toTopOf="@+id/guideline7"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="@+id/guideline11" />

    <EditText
        android:id="@+id/main_password_et"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:ems="10"
        android:hint="password"
        android:inputType="textPassword"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="@+id/guideline12" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.22" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.46" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.56" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5307798" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.76" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.29683697" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.7" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.24" />

    <TextView
        android:id="@+id/main_password_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="密碼顯示位子"
        android:gravity="center"
        android:textSize="30dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline16" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity

package com.example.test;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {
    private Button sendBtn;
    private TextView accountTv,passwordTv;
    private EditText accountEt,passwordEt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);

        sendBtn = findViewById(R.id.main_send_btn);
        accountTv = findViewById(R.id.main_account_tv);
        passwordTv = findViewById(R.id.main_password_tv);
        accountEt = findViewById(R.id.main_account_et);
        passwordEt = findViewById(R.id.main_password_et);

        sendBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String accountStr = accountEt.getText().toString();
                String passwordStr = passwordEt.getText().toString();

                accountTv.setText("帳號："+accountStr);
                passwordTv.setText("密碼："+passwordStr);
            }
        });
        sendBtn.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                sendBtn.setEnabled(false);
                return true;
            }
        });
    }
}

簡單的練習就到這裡
下篇會介紹Linear Layout


上一篇
[Day 09] Guidelines介紹
下一篇
[Day 11] Linear Layout介紹
系列文
深入Android Java程式語言 - 打造我的行動應用 共 30 篇
  1. 26
    [Day 26] MVP架構介紹
  2. 27
    [Day 27] SharedPreferences介紹
  3. 28
    [Day 28] 完成一個記事本app(上) - 新增功能
  4. 29
    [Day 29] 完成一個記事本app(中) - 刪除功能
  5. 30
    [Day 30] 完成一個記事本app(下) - 清除功能 + 結語
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22189 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙